<!--&lt;!&ndash;统一展示表头只展示了选中第一条数据的信息&ndash;&gt;-->
<template>
  <div>
    <el-button
      type="warning"
      plain
      icon="el-icon-printer"
      size="mini"
      @click="handlePrint"
      :disabled="disabled"
    >打印</el-button>
  </div>
</template>

<script>
export default {
  name: "PrintComponent",
  props: {
    selectedRows: {
      type: Array,
      required: true
    },
    disabled: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handlePrint() {
      if (this.selectedRows.length === 0) {
        this.$message({
          message: "请选择要打印的数据",
          type: "warning"
        });
        return;
      }
     //console.log("this.selectedRows",this.selectedRows)
      const printWindow = window.open("", "", "width=800,height=600");
      printWindow.document.write("<html><head><title>打印</title></head><body>");
      printWindow.document.write(this.generatePrintContent());
      printWindow.document.write("</body></html>");
      printWindow.document.close();
      printWindow.print();
    },
    generatePrintContent() {
      const firstRow = this.selectedRows[0];
      let printContent = `
          <div>
            <h3>生产入库单</h3>
            <div style="display: flex;justify-content: space-between;align-items: center" >
              <p><strong>入库类型:</strong> ${firstRow.libraryType == 1 ? "生产入库" : firstRow.libraryType == 2 ? "退料入库" : firstRow.libraryType == 3 ? '销售退货入库' :  firstRow.libraryType == 4 ? '收货入库' : firstRow.libraryType == 5 ? '外采入库': " "}</p>
              <p><strong>入库日期:</strong> ${firstRow.createTime ? this.parseTime(firstRow.createTime, '{y}-{m}-{d}') : ' '}</p>
            </div>
            <table border="1" style="width:100%; border-collapse:collapse;">
              <thead>
                <tr>
                  <th>单据编号</th>
                  <th>产品名称</th>
                  <th>产品编号</th>
                  <th>库位编号</th>
                  <th>库区编号</th>
                  <th>入库数量</th>
                  <th>质检结果</th>
                  <th>批次号</th>
                  <th>生产日期</th>
                  <th>有效期</th>
                </tr>
              </thead>
              <tbody>
        `;

      this.selectedRows.forEach(row => {
        printContent += `
            <tr>
                <td>${row.documentNumber ? row.documentNumber : ' '}</td>
            <td>${row.materialName ? row.materialName : ' '}</td>
            <td>${row.materialCode ? row.materialCode : ' '}</td>
            <td>${row.materialNumber ? row.materialNumber : ' '}</td>
            <td>${row.reservoirNumber ? row.reservoirNumber : ' '}</td>
            <td>${row.totalAmount ? row.totalAmount : ' '}</td>
            <td>${row.zhijian == 1 ? "待检" : row.zhijian == 2 ? "合格" : '不合格'}</td>
              <td>${row.batchNumber ?row.batchNumber : ' ' }</td>
              <td>${row.productionDate ? this.parseTime(row.productionDate, '{y}-{m}-{d}') : ' '}</td>
              <td>${row.validity ? this.parseTime(row.validity, '{y}-{m}-{d}') : ' '}</td>
            </tr>
          `;
      });

      printContent += `
              </tbody>
            </table>
             <div style="display: flex;justify-content: space-between;align-items: center" >
              <p><strong>质检员:</strong> ${firstRow.createUser || ' '}</p>
              <p><strong>制单人:</strong> ${firstRow.createUser || ' '}</p>
            </div>
          </div>
        `;

      return printContent;
    },
    parseTime(time, format) {
      const date = new Date(time);
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
      };
      return format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
        let value = formatObj[key];
        if (key === 'a') return ['日', '一', '二', '三', '四', '五', '六'][value];
        if (result.length > 0 && value < 10) {
          value = '0' + value;
        }
        return value || 0;
      });
    }
  }
};
</script>
<!--&lt;!&ndash;选中的每个数据都单独展示&ndash;&gt;-->
<!--<template>-->
<!--  <div>-->
<!--    <el-button-->
<!--      type="warning"-->
<!--      plain-->
<!--      icon="el-icon-printer"-->
<!--      size="mini"-->
<!--      @click="handlePrint"-->
<!--      :disabled="disabled"-->
<!--    >打印</el-button>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  name: "PrintComponent",-->
<!--  props: {-->
<!--    selectedRows: {-->
<!--      type: Array,-->
<!--      required: true-->
<!--    },-->
<!--    disabled: {-->
<!--      type: Boolean,-->
<!--      default: true-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    handlePrint() {-->
<!--      if (this.selectedRows.length === 0) {-->
<!--        this.$message({-->
<!--          message: "请选择要打印的数据",-->
<!--          type: "warning"-->
<!--        });-->
<!--        return;-->
<!--      }-->

<!--      const printWindow = window.open("", "", "width=800,height=600");-->
<!--      printWindow.document.write("<html><head><title>打印</title></head><body>");-->
<!--      this.selectedRows.forEach(row => {-->
<!--        printWindow.document.write(this.generatePrintContent(row));-->
<!--        printWindow.document.write('<div style="page-break-before: always;"></div>');-->
<!--      });-->
<!--      printWindow.document.write("</body></html>");-->
<!--      printWindow.document.close();-->
<!--      printWindow.print();-->
<!--    },-->
<!--    generatePrintContent(row) {-->
<!--      return `-->
<!--        <div>-->
<!--          <h3 style="display: flex;align-items: center;justify-content: center">生产入库单</h3>-->
<!--         <div style="display: flex;justify-content: space-between;align-items: center" >-->
<!--             <p><strong>入库类型:</strong> ${row.libraryType == 1 ? "生产入库" : row.libraryType == 2 ? "退料入库" : row.libraryType == 3 ? '销售退货入库' :  row.libraryType == 4 ? '收货入库' : row.libraryType == 5 ? '外采入库': " "}</p>-->
<!--              <p><strong>入库日期:</strong> ${row.createTime ? this.parseTime(row.createTime, '{y}-{m}-{d}') : ' '}</p>-->
<!--            </div>-->
<!--          <table border="1" style="width:100%; border-collapse:collapse;">-->
<!--            <thead>-->
<!--              <tr>-->
<!--                <th>单据编号</th>-->
<!--                <th>产品名称</th>-->
<!--                <th>产品编号</th>-->
<!--                <th>库位编号</th>-->
<!--                <th>库区编号</th>-->
<!--                <th>入库数量</th>-->
<!--                <th>质检结果</th>-->
<!--                <th>批次号</th>-->
<!--                <th>生产日期</th>-->
<!--                <th>有效期</th>-->
<!--              </tr>-->
<!--            </thead>-->
<!--            <tbody>-->
<!--              <tr>-->
<!--                <td>${row.documentNumber ? row.documentNumber : ' '}</td>-->
<!--                <td>${row.materialName ? row.materialName : ' '}</td>-->
<!--                <td>${row.materialCode ? row.materialCode : ' '}</td>-->
<!--                <td>${row.materialNumber ? row.materialNumber : ' '}</td>-->
<!--                <td>${row.reservoirNumber ? row.reservoirNumber : ' '}</td>-->
<!--                <td>${row.totalAmount ? row.totalAmount : ' '}</td>-->
<!--                <td>${row.zhijian == 1 ? "待检" : row.zhijian == 2 ? "合格" : '不合格'}</td>-->
<!--                <td>${row.batchNumber ? row.batchNumber : ' ' }</td>-->
<!--                <td>${row.productionDate ? this.parseTime(row.productionDate, '{y}-{m}-{d}') : ' '}</td>-->
<!--                <td>${row.validity ? this.parseTime(row.validity, '{y}-{m}-{d}') : ' '}</td>-->
<!--              </tr>-->
<!--            </tbody>-->
<!--          </table>-->
<!--            <div style="display: flex;justify-content: space-between;align-items: center" >-->
<!--              <p><strong>质检员:</strong> ${row.createUser || ' '}</p>-->
<!--             <p><strong>制单人:</strong> ${row.createUser || ' '}</p>-->
<!--           </div>-->
<!--        </div>-->
<!--      `;-->
<!--    },-->
<!--    parseTime(time, format) {-->
<!--      const date = new Date(time);-->
<!--      const formatObj = {-->
<!--        y: date.getFullYear(),-->
<!--        m: date.getMonth() + 1,-->
<!--        d: date.getDate(),-->
<!--        h: date.getHours(),-->
<!--        i: date.getMinutes(),-->
<!--        s: date.getSeconds(),-->
<!--        a: date.getDay()-->
<!--      };-->
<!--      return format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {-->
<!--        let value = formatObj[key];-->
<!--        if (key === 'a') return ['日', '一', '二', '三', '四', '五', '六'][value];-->
<!--        if (result.length > 0 && value < 10) {-->
<!--          value = '0' + value;-->
<!--        }-->
<!--        return value || 0;-->
<!--      });-->
<!--    }-->
<!--  }-->
<!--};-->
<!--</script>-->
